<template>
  <div class="mine">
      <div class="mine-top">
       <div class="top-one">
           <img src="../../assets/image/04.png" alt="">
           <div class="name">
               <span>代用名</span>
               <span>完善资料让小U更懂您</span>
           </div>
           <div class="envelope">
               <img src="../../assets/image/red_envelopes.png" alt="">
               <span>每日签到</span>
           </div>
       </div>
       <div class="top-two">
           <div class="collection">
               <span>12</span>
               <span>我的收藏</span>
           </div>
           <div class="collection">
               <span>12</span>
               <span>浏览记录</span>
           </div>
           <div class="collection">
               <span>12</span>
               <span>我的红包</span>
           </div>
           <div class="collection">
               <span>12</span>
               <span>优惠券</span>
           </div>
       </div>
       <div class="my-order">
           <div class="m-o">
               <span>我的订单</span>
               <span>全部订单></span>
           </div>
           <div class="m-t">
               <div class="m-tb">
                   <img src="../../assets/image/payment.png" alt="">
                   <span>待付款</span>
               </div>
               <div class="m-tb">
                   <img src="../../assets/image/payment.png" alt="">
                   <span>待发货</span>
               </div>
               <div class="m-tb">
                   <img src="../../assets/image/payment.png" alt="">
                   <span>待确认</span>
               </div>
               <div class="m-tb">
                   <img src="../../assets/image/payment.png" alt="">
                   <span>售后/退款</span>
               </div>
           </div>

       </div>
    </div>
    <div class="add-list">
        <ul class="add-l">
            <li> 
                <div class="add-pic"><img src="../../assets/image/address.png" alt="">地址管理</div> <span>></span>
            </li>
            <li> 
                <div class="add-pic"><img src="../../assets/image/delivery.png" alt="">我的钱包</div> <span>剩余200U币></span>
            </li>
            <li> 
                <div class="add-pic"><img src="../../assets/image/address.png" alt="">我的二维码</div> <span>></span>
            </li>
            <li> 
                <div class="add-pic"><img src="../../assets/image/evaluation.png" alt="">我的小伙伴</div> <span>></span>
            </li>
            <li> 
                <div class="add-pic"><img src="../../assets/image/service.png" alt="">0元试用</div> <span>></span>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.mine {
  background-color: #efefef;
  padding-bottom: .49rem;
  height: 100vh;
}
.mine-top {
    width: 100%;
    margin: 0 auto;
    height: 2.3rem;
    background-image: linear-gradient(180deg, #FF6040 0%, #FF8A80 100%);
    box-shadow: 0 2px 6px 0 rgba(255,149,128,0.50);
    position: relative;
    padding-top: .2rem;
    margin-bottom: .3rem;
}
.top-one {
    width: 3.55rem;
    height: 0.64rem;
    display: flex;
    margin-bottom: .1rem;
    margin: 0 auto;  
}
.top-one img {
    width: .64rem;
    height: .64rem;
    border-radius: 50%;
    margin-right: .13rem;
}
.name span:nth-of-type(1) {
    font-size: .18rem;
}
.name {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #FFFFFF;
}
.name span:nth-of-type(2) {
    border: 1px solid #FFFFFF;
    border-radius: 1px;
    width: 1.64rem;
    height: .16rem;
    line-height: .16rem;
}
.envelope {
    width: .76rem;
    height: .2rem;
    background-color: #FFD4CC;
    color: #FF6243;
    border-radius: 10px 0 0 10px;
    text-align: center;
    line-height: .2rem;
    position: absolute;
    top: .32rem;
    right: 0;
}
.envelope img {
    width: .16rem;
    height: .16rem;
    margin-right: 0;
    vertical-align: middle;  
}
.top-two {
    width: 3.55rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    height: .5rem;
    margin-bottom: .1rem;
}
.collection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.collection span:nth-of-type(1) {
    font-size: .18rem;
}
.my-order {
    margin: 0 auto;
    width: 3.55rem;
    background-color: #fff;
    height: 1.03rem;
    border-radius: 4px;
}
.m-o {
    height: .36rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .1rem;
    align-items: center;
}
.m-o span:nth-of-type(1) {
    font-size: .16rem;
    font-weight: 600;
}
.m-o span:nth-of-type(2) {
    color: #FF6040;
}
.m-t {
    height: .67rem;
    display: flex;
    justify-content: space-around; 
}
.m-tb {
    display: flex;
    flex-direction: column; 
    justify-content: center;
}
.add-list {
    width: 100%;
    height: 2rem;
    padding: .1rem 0;
    background-color: #fff;
}
.add-l {
    display: flex;
    flex-direction: column;
    height: 1.8rem;
}
.add-l li {
    padding: 0 .1rem;
    flex: 1;
    display: flex;
    justify-content: space-between;
    line-height: .36rem;
}
.add-l li img {
    width: .16rem;
    height: .16rem;
    margin-right: .05rem;
}
</style>